프로젝트 개요 및 팀

구성

UI/UX 설계

UI/UX 디자인

구현 및 개발

프로젝트 수행

결과

01. 프로젝트 개요 및 팀 구성

1-1 프로젝트 개요

01. 프로젝트 개요 및 팀 구성

꿀스테이 : 숙박 예약 어플

1-1 프로젝트 개요

01. 프로젝트 개요 및 팀 구성

꿀스테이의 강점

01. 프로젝트 개요 및 팀 구성

1-1 프로젝트 개요

홍보 내용 축소

부족한 내용 정보 전달 부족 비효율적인

반응형

웹서비스

트렌드에 뒤쳐진

UI 심미성

꿀스테이의 약점

홍보 부족으로 낮은 인지도

현업 이슈

2022년 국내 온라인 숙박어플 ‘여기어때’, ‘야놀자’ 등 경쟁 업체에 비해 낮은 선호도

후발주자로 시작하여 플랫폼 내 숙소의 다양성 부족

트렌드를 반영하지 못한 UI로 타 경쟁사에 비해 신뢰성과 홍보성이 떨어짐

홍보 내용을 매우 축약 시켜 놓아서 꿀스테이에 대한 홍보성이 빈약함

문제

1 : 파트너센터는 영업 용도로 기획을 하였으나 기획 의도를 벗어나고 있음

문제

2 : 파트너센터는 다양한 디바이스나 해상도에 따른 효율적인 웹 서비스가 제공되고 있지

않음

문제

3 : 파트너센터는 홍보 내용이 빈약함

문제

4 : 파트너센터는 UI의 심미성이 트렌드에 뒤처져 있음

프로젝트 주제

알림톡을

활용한 꿀스테이 파트너센터 랜딩페이지 제작

1-2 현업이슈 및 문제

01. 프로젝트 개요 및 팀 구성

1-3 주제 및 기획의도

꿀스테이 파트너센터 랜딩페이지 제작

- 랜딩페이지 클릭 수에 따른 노출 효과로 홍보 효과 극대화

01. 프로젝트 개요 및 팀 구성

랜딩페이지 제작의 필요성

-다양한 전략이 나오는 시점에서 급부상하고 있는 마케팅 전략

-랜딩페이지를 활용한 마케팅은 영업 기회를 창출

-클릭을 유도하여 방문자가 구매나 구독을 하도록 장려

다양한 채널에서 홍보할 수 있는 강력한 마케팅 전략

1-4 활용방안 및 기대효과

01. 프로젝트 개요 및 팀 구성

1-6 프로젝트 기술서

Project 주제

알림톡을

활용한 꿀스테이 파트너센터

랜딩페이지

제작 팀명

도와조

Project 선정 배경

현업에서

기대하는 것은 무엇인가?

업주에게

꿀스테이에 대한 적극 홍보로 브랜드 선호도 상승과

상담

예약 시스템으로 업주들의 편의성을 높임

구체적으로 해결하고자

하는 것은 무엇인가?

(Project Output Image)

다양한 디바이스 및 해상도에 효율적으로 서비스 될 수 있는 반응형 웹 구현

사용자의 니즈 및 최신 트렌드를 반영한 UI로 디자인

업주 입장에서 봤을 때의 꿀스테이의 장점을 상세하게 설명하고, 적극적으로 홍보

효율적이고 편리한 상담 예약을 위한 알림톡 구현

프로젝트 수행을 위해

더 알아야 하는 것은 무엇인가?

[

업주의 니즈 파악]

- 업주 입장에서 꿀스테이를 사용했을 시 돌아오는 장점을 명확하게 파악하고 홍보

[

알림톡 기술 구현]

- 알림톡을 활용하여 상담 예약 확인 기능 구현

[

랜딩페이지 기능 구현]

- 최신 트렌드에 맞는 랜딩페이지의 디자인과 기능을 구현

1-7 벤치마킹

01. 프로젝트 개요 및 팀 구성

KREAM ZIGZAG

1-8 프로토타입

01. 프로젝트 개요 및 팀 구성

1-9 팀 구성 및 역할

01. 프로젝트 개요 및 팀 구성

1-10 개발언어 및 툴

01. 프로젝트 개요 및 팀 구성

1-11 개발 기간 및 개발 일정

01. 프로젝트 개요 및 팀 구성

02. UI/UX 설계

2-1 워크플로우

02. UI/UX 설계

2-2 중단점 설계

02. UI/UX 설계

768px 428px

1024px

2-3 와이어프레임

02. UI/UX 설계

2-3 와이어프레임

02. UI/UX 설계

Tablet Mobile

2-4 스토리 보드

02. UI/UX 설계

텍스트 서서히 나타나는

효과

버튼 클릭시 상담예약창으로 바로

이동

텍스트 / 이미지 서서히 나타나는

효과

2-4 스토리 보드

02. UI/UX 설계

4텍스트 서서히 나타나는

효과

5마우스 hover시 카드 플립

효과

6정보 입력시 상담 예약 알림톡

발송

2-5 스타일 가이드

02. UI/UX 설계

03. UI/UX 디자인

3-1 UI 디자인

03. UI/UX 디자인

PC ver.

3-1 UI 디자인

03. UI/UX 디자인

PC ver.

3-1 UI 디자인

03. UI/UX 디자인

PC ver.

3-1 UI 디자인

03. UI/UX 디자인

Tablet ver.

3-1 UI 디자인

03. UI/UX 디자인

Tablet ver.

3-1 UI 디자인

03. UI/UX 디자인

Mobile ver.

3-1 UI 디자인

03. UI/UX 디자인

Mobile ver.

03. UI/UX 디자인

3-1 UI 디자인

04. 구현 및 개발

4-1 반응형 웹 구현

04. 구현 및 개발

PC ver. 1024px

4-1 반응형 웹 구현

04. 구현 및 개발

Tablet Mobile

4-2 동적 기능 구현

04. 구현 및 개발

1) Fade-up 효과(<div> )

4-2 동적 기능 구현

04. 구현 및 개발

2) 슬라이드 효과(PC ver.)

4-2 동적 기능 구현

04. 구현 및 개발

카드 애니메이션 효과(마우스 hover)

4-3 API 기능 구현

04. 구현 및 개발

①

알림톡 구현을 위한 솔라피 api 호출

②

입력 폼을 작성하고 클릭

③

btn_sendMessage() 함수 호출

-입력 폼에 있던 정보를 변수에 저장

sendMessage 함수에 파라미터로 넣어

전송

카카오 알림톡 구현

4-3 API 기능 구현

04. 구현 및 개발

④

파라미터로 받은 정보를 Json 형태로 변환하여 알림톡 전송 요청

05. 프로젝트 수행 결과

5-1 구현 영상

https://www.youtube.com/watch?v=hT

MxKFvgRQw

05. 프로젝트 수행 결과

5-2 구현 홈페이지

http://jin13181.ivyro.net/coolstay

Thank you

감사합니다